<template>
    <div class="contenBox">     
         <!-- 头部搜索 -->
         <div class='first'>
          <el-card class="box-card">
            <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="系统模块">
                <el-input placeholder="请输入专业名称" v-model="system" ></el-input>
            </el-form-item>
            <el-form-item label="操作人员">
                <el-input placeholder="请输入操作人员" v-model="pename" ></el-input>
            </el-form-item>
            <el-form-item label="操作类型">
                <el-input placeholder="请输入操作类型" v-model="petype" ></el-input>
            </el-form-item>
            <br/>
            <el-form-item label="日期">
                         <el-date-picker
                            v-model="formData.start"
                            type="datetime"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="'00:00:00'"
                            >
                        </el-date-picker>
                        -
                        <el-date-picker
                            v-model="formData.end"
                            type="datetime"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="'23:59:59'"
                            >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                          <el-button type="primary" @click='changeSearch' style='width:100px;background:#7bb4d0;border:none;'>
                <i class="el-icon-search"></i>
              搜索</el-button>
              <el-button @click='refreshInput' type="success" style='width:100px;background:#6ccfcc;border:none;'>
                <i class="el-icon-refresh"></i>
              重置</el-button>
                    </el-form-item>
            </el-form>

          <div class='sear'>
             <el-button @click='changeSearch' style='width:100px;height:40px;border:1px solid red;color:red'>
                <i
                class="el-icon-delete"
              ></i>
              删除</el-button>
              <el-button @click='refreshInput'  style='width:100px;height:40px;border:1px solid red;color:red;'>
                <i
                class="el-icon-delete"
              ></i>
              清空</el-button>
              <el-button @click='refreshInput'  style='width:100px;height:40px;border:1px solid #ffba4a;color:#ffba4a;'>
              <i  class="iconfont icon-daochu"></i>
              导出</el-button>
          </div>
          </el-card>
         </div>
          
         <div>
             <template>
                <el-table
                :data="tableData"
                style="width: 94%">
                <el-table-column
                    prop='operId'
                    label="日志编号"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="operatorType"
                    label="操作类型"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="系统模块">
                </el-table-column>
                <el-table-column
                    prop="operName"
                    label="操作人员">
                </el-table-column>
                <el-table-column
                    prop="operLocation"
                    label="操作地点">
                </el-table-column>
                <el-table-column
                    prop="operTime"
                    label="操作时间">
                </el-table-column>
               <el-table-column
                    prop="status"
                    label="操作状态">
                    <template slot-scope='scope'>
                    <!-- {{scope.row.mg_state}} -->
                    <el-switch
                    v-model="scope.row.mg_state"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                    </el-switch>
                </template>
                </el-table-column>
                <el-table-column
            fixed="right"
            label="操作">
            <template>
                <div>
                  <el-button type='text'>查看详情</el-button>
                </div>
            </template>
            </el-table-column>
                </el-table>
            </template>
         </div>
        <div class="pagination">
          <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pageNum"
        :page-sizes="[2, 3, 4, 5]"
        :page-size="query.pageSize"
        prev-text="上一页"
        next-text="下一页"
        layout=" prev, pager, next"
        :total="query.total"
      ></el-pagination>

          <div class="jumper">
            跳到第
            <input type="text" ref="pageNum" :value="query.pageNum" />
            页
          </div>
          <button @click="goPage">确定</button>
        </div>
    </div>
</template>
<script>
import { operloglistApi } from "@/api/basics/operlog";
export default {
  data() {
    return {
      tableData: [],
      formData:{
        start:'',
        end:'',
      },
      system: "",
      pename: "",
      petype: "",
      petime: "",
      query: {
        pageNum: 1,
        pageSize: 6,
        total: 0
      }
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await operloglistApi(this.query);
      console.log(res);
      this.tableData = res.rows;
      this.query.total = res.total;
    },
    // 分页
    // 改变每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val;
      this.getList();
    },
    //切换页数，执行方法
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val;
      this.getList();
    },
    goPage() {
      let { value } = this.$refs.pageNum;
      console.log("1", value);
      this.query.pageNum = Number(value);
      this.getList();
    },
    // 搜索  
    changeSearch() {
      let data={
        title: this.system,
        operName: this.pename,
        operatorType: this.petype,
        operTime: this.formData.start
      }
      operloglistApi(data).then(res => {
        console.log(res);
        this.tableData = res.rows;
      });
    },
    selectDate() {
      this.date = true;
    },
    // 取消选择时间
    closeSelect() {
      this.date = false;
    },
    //重置
    refreshInput() {
      this.system = "";
      this.pename = "";
      this.petype = "";
      this.petime = "";
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
.contenBox {
  width: 104%;
  height: 100%;
  background-color: #f3f2f7;
  box-sizing: border-box;
}
.first {
  display: flex;
  width: 94%;
}
.box-card {
  width: 100%;
  float: left;
}
.search {
  margin-left: 635px;
  margin-top: -60px;
}
.sear{
  margin:20px 5px;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-top: 20px;
  margin-right: 150px;

  .jumper {
    font-size: 14px;
    margin-left: 20px;
    margin-right: 10px;
    display: flex;
    align-items: center;

    input {
      width: 40px;
      height: 26px;
      margin: 0 5px;
      text-align: center;
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #666;
      outline-style: none;
    }
  }

  button {
    height: 28px;
    line-height: 28px;
    border-radius: 5px;
    background-color: #4895db;
    border: solid 1px #4895db;
    color: #fff;
    font-size: 14px;
    padding: 0 8px;
  }
}
</style>
